/**
 * @description 表单新增
 * 
 */
import { useEffect, useState } from 'react';
import { Form, Modal } from 'antd';

import { mouseDownEvent } from "@/utils/touchEvent";

import YyFormItem from '@/components/FormItem'


const formItemList = [
  {
    form_type: 'YyText',
    columnName: 'YyText',
    comments: '普通',
    placeholder: "请输入文本",
    rules: [
      {
        required: true,
        message: '请输入'
      }
    ]
  },
  {
    form_type: 'YyText',
    columnName: 'YyText_disable',
    comments: '禁用的普通',
    placeholder: "请输入文本",
    unique: '自',
  },
  {
    form_type: 'YyTextNumber',
    columnName: 'YyTextNumber',
    placeholder: "请输入数值",
    comments: '数值'
  },
  {
    form_type: 'YyTextNumber',
    columnName: 'YyTextNumber_disable',
    placeholder: "请输入数值",
    unique: '自',
    comments: '禁用的数值'
  },
  {
    form_type: 'YySingleSelect',
    columnName: 'YySingleSelect',
    comments: '单选',
    placeholder: "请选择",
    options: [
      {
        label: '选项一',
        value: '选项一',
      },
      {
        label: '选项二',
        value: '选项二',
      },
    ],
  },
  {
    form_type: 'YySingleSelect',
    columnName: 'YySingleSelect_disable',
    comments: '禁用的单选',
    placeholder: "请选择",
    unique: '自',
    options: [
      {
        label: '选项一',
        value: '选项一',
      },
      {
        label: '选项二',
        value: '选项二',
      },
    ],
  },
  {
    form_type: 'YyDatePicker',
    columnName: 'YyDatePicker',
    comments: '日期',
  },
  {
    form_type: 'YyDatePicker',
    columnName: 'YyDatePicker_disable',
    unique: '自',
    comments: '禁用的日期',
  },

  {
    form_type: 'YyFace',
    columnName: 'YyFace',
    comments: '人脸识别',
  },
  {
    form_type: 'YyFile',
    columnName: 'YyFile',
    comments: '文件上传',
  },
  {
    form_type: 'YyTextArea',
    columnName: 'YyTextArea',
    comments: '多行文本',
  },
  {
    form_type: 'YyQuill',
    columnName: 'YyQuill',
    comments: '富文本',
  },
]

function AddOrUpdate({ add }) {
  let base = add.base
  let formBase = add.addform.base

  // 表单实例form
  const [form] = Form.useForm()

  useEffect(() => {

    let root = document.querySelector('.ant-modal-wrap')
    root.addEventListener('mousedown', mouseDownEvent, false)

    return () => {
      root.removeEventListener('mousedown', mouseDownEvent)
      root = null
    }
  }, [])

  return (
    <Modal
      title='新增'
      open={true}
      width={'80%'}
      onOk={() => { }}
      onCancel={() => { }}
      okText={base.okText}
      cancelText={base.cancelText}
      className='add-modal'
      maskClosable={false}
    >
      <Form
        className='addform'
        form={form}
        layout={formBase.layout}
        name="addform"
        autoComplete="off"
        colon={formBase.colonFlag}
        spellCheck={false}
      >

        {/* 表单，根据form_type确定不同的输入框 */}
        {
          formItemList.map(column => (
            <YyFormItem key={column.columnName} form={form} column={column} showLabel={formBase.labelFlag}></YyFormItem>
          ))
        }

      </Form>
    </Modal>

  )
}
export default AddOrUpdate